<template>
    <div class="app-container">
        <header>
            <div>
                <el-form :model="form" label-width="120px" inline size="small">
                    <el-form-item label="学员姓名" label-width="100px">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号码">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="进度">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="挂靠点">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="教练">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="开始报名日期" label-width="100px">
                        <el-date-picker size="small" value-format="yyyy-MM-dd" v-model="form.region" type="date"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="截止报名日期">
                        <el-date-picker size="small" value-format="yyyy-MM-dd" v-model="form.region" type="date"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label=" " label-width="70px">
                        <div class="btn">
                            <el-button type="primary" icon="el-icon-search">查询</el-button>
                            <el-button type="info" plain>导出</el-button>
                            <el-button type="info" plain>批量收余款</el-button>
                        </div>
                    </el-form-item>


                </el-form>
            </div>
        </header>

        <main>
            <div style="height: 640px;margin-top: 10px;">
                <el-table :data="tableData" height="100%" border :default-sort="{ prop: 'date', order: 'descending' }">
                    <el-table-column type="selection" width="55" align="center" />
                    <el-table-column prop="id" label="ID" sortable width="120" align="center">
                        <template slot-scope="scope">
                            <span style="color: #4d4de2;cursor: pointer;" @click="go(scope.row,
                                'http://jx.qida999.com/DriverCommon/driver/dr_person.html')">{{ scope.row.id }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" sortable width="120" align="center">
                        <template slot-scope="scope">
                            <span style="color: #4d4de2;cursor: pointer;" @click="go(scope.row,
                                'http://jx.qida999.com/DriverCommon/driver/dr_money.html')">{{ scope.row.name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sex" label="性别" sortable width="120" align="center" />
                    <el-table-column prop="car" label="车型" sortable width="120" align="center" />
                    <el-table-column prop="tel" label="电话" sortable width="180" align="center" />
                    <el-table-column prop="idcard" label="身份证" sortable width="180" align="center" />
                    <el-table-column prop="time" label="报名日期" sortable width="150" align="center" />
                    <el-table-column prop="StateStr" label="进度" sortable width="150" align="center" />
                    <el-table-column prop="leader" label="教练" sortable width="120" align="center" />
                    <el-table-column prop="com_name" label="挂靠点" sortable width="120" align="center" />
                    <el-table-column prop="class" label="班别" sortable width="120" align="center" />
                    <el-table-column prop="money" label="主营收入" sortable width="120" align="center" />
                    <el-table-column prop="act_money" label="实收" sortable width="120" align="center" />
                    <el-table-column prop="lost_money" label="欠款" sortable width="120" align="center" />
                </el-table>
            </div>
        </main>

        <!-- 分页 -->
        <footer>
            <div class="money">
                <p>主营收入：<span>￥146,550 元</span></p>
                <p>累计实收：<span>￥62,723 元</span></p>
                <p>累计欠款：<span>￥83,327 元</span></p>
            </div>
            <div class="pagin">
                <el-pagination background :current-page="1" :page-sizes="[20, 50, 100, 150]"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" :page-size="initParams.pageSize" />
            </div>
        </footer>
    </div>
</template>

<script>
/**
* @author        Yng
* @time          2023-11-07 18:27:20  星期二
* @description   应收账款管理
**/
import { oldLoginSystem } from '@/utils/publicMethod'
import { debtAPI } from '@/api/adminstare'
export default {
    data() {
        return {
            form: { name: '', region: '' },
            tableData: [],
            initParams: {
                action: "moneyLostList",
                page: 1,
                pageSize: 20,
            },
            // 分页总条数
            total: 0,
        }
    },
    mounted() {
        this.getListData()
    },
    methods: {
        async getListData() {
            try {
                const result = await debtAPI(this.initParams)
                this.total = result.total
                this.tableData = result.data
            } catch (error) { }
        },
        // 一页几条数据
        handleSizeChange(val) {
            this.initParams.pageSize = val
            this.getListData();
        },
        // 当前页
        handleCurrentChange(val) {
            this.initParams.page = val
            this.getListData();
        },
        // 点ID跳旧版
        go(val, URL) {
            const redirectUrl = `${URL}?aid=${val.JxID}&id=${val.id}`
            const url = 'http://jx.qida999.com/DriverCommon/CommApiNew/login/Login.aspx'
            oldLoginSystem(redirectUrl, url)
        },
    },
}
</script>

<style lang="scss" scoped>
.btn {
    margin-left: 50px;
    display: inline-block;
}

footer {
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;

    .money {
        width: 100%;
        display: flex;
        margin-top: 20px;

        p {
            margin: 0;
            padding: 0;
        }

        p:first-child {
            span {
                color: rebeccapurple;
            }
        }

        p:nth-of-type(2) {
            margin-left: 30px;
            span {
                color: #3498db;
            }
        }

        p:last-child {
            margin-left: 30px;
            span:last-child {
                color: red;
            }
        }

        p:first-child::before,
        p:nth-of-type(2)::before,
        p:last-child::before {
            display: inline-block;
            content: '';
            width: 13px;
            height: 13px;
            border-radius: 50%;
            margin-right: 5px;
        }

        p:first-child::before {
            background: rebeccapurple;
        }

        p:nth-of-type(2)::before {
            background: #3498db;
        }

        p:last-child::before {
            background: red;
        }
    }
}
</style>